<template>
  <view class="basic tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

	<view style="margin-top: 28rpx;">
		<tn-swiper :height="swiperHeight" :list="listAdv"  :radius="10" ></tn-swiper>
	</view>
	
	<view class="search-box tn-pl-sm tn-pr-lg bottom-search" @click="search()">
		<text class="tn-icon-search icon"></text>
		<text class="tn-pl-sm" style="color: #c8c9cc;">搜索</text>
	</view>
	
	<view class="main_title">
		<span>热门板块</span>
		<span class="tn-float-right">查看全部 >></span>
	</view>
	
  <view class="flex00 tn-margin-top-sm">
	<view class="flex-2 ">
	  <view v-for="(item,key) in list" :key="key" @tap="trunListCate(item.id)"  class="tn-radius10 width-2  heightSmall" :style="{ backgroundImage: 'url(' + item.image + ');' }"></view>
	</view>
  </view>

   <view class="tn-margin-top">
	   <view class="main_title mentor_title tn-radius10">
	   	<span>社群</span>
	   	<span style="margin-left: 52rpx;">查看全部 >></span>
	   </view>
	   <view class="activity_list tn-margin-top-sm bg ">
		   <view class="tn-flex  tn-flex-row-between tn-margin-bottom-sm" v-for="(item,index ) in space" :key="index">
			   <view @tap="trunList(val.id)" v-for="(val,sindex ) in item" :key="sindex" class="space_image" :style="{ backgroundImage: 'url('+val.pic+');'}"></view>
			   <!-- <view class="space_image" :style="{ backgroundImage: 'url(http://www.zztengma.com/lihu/bumang/images/activity_space.jpg);'}"></view> -->
		   </view>
		   
	   </view>
   </view>
  <view class="tn-margin-top" v-for="(item,key) in list" :key="key">
  	<view class="main_title mentor_title tn-radius10 ">
  		<span>{{item.name}}</span>
  		<span style="margin-left: 52rpx;" @tap="trunListCate(item.id)">查看全部 >></span>
  	</view>
  	<view class="activity_list tn-margin-top-sm" v-for="(activity,sIndex) in item.activity" :key="sIndex" @tap="detail(activity)">
		<div class="top">
			<view class="logo" :style="{ backgroundImage: 'url(' + activity.pic + ');'}"></view>
			<view class="right">
				<view class="title">
					<span style="margin-right: 20rpx;">{{activity.title}}</span>
				</view>
				<view class="location"><i class="tn-icon-clock icons"></i>时间：{{activity.start_time| parseTime('{y}-{m}-{d} {h}:{i}')}}-{{activity.end_time| parseTime('{m}-{d} {h}:{i}')}}</view>
				<view class="location"><i class="tn-icon-location icons"></i>距离：{{activity.distance||"未知"}}</view>
				<view class="location location_price">
					<view class="price">￥{{activity.price}}/人</view>
					<view class="order-btn" @tap.stop="preOrder(activity.id)">立即报名</view>
				</view>
			</view>
		</div>
		
		<!-- <view class="footer">
			<view class="tn-float-left footer-left">
				<span><span style="color: #010000;">{{activity.user_entry_num}}</span>/{{activity.user_num}}人已参加</span>
				<span style="margin-left: 25rpx;">发布于  {{activity.created_at| parseTime('{m}-{d}')}} {{activity.nickname}}</span>
			</view>
			
			<view class="tn-float-right footer-right">
				<view class="price">￥{{activity.price}}/人</view>
				<view class="order-btn" @tap.stop="preOrder(activity.id)">立即报名</view>
			</view>
			
		</view> -->
  	</view>
  </view>
  
  <TemplateLoading :active="loading"></TemplateLoading>

  <view class="tn-padding-bottom-xs"></view>

  </view>
</template>

<script>
  import {fetchList} from '@/api/index/index.js'
  import {indexObj,getRelateSpace} from '@/api/activity/index.js'
  import TemplateLoading from '../components/loading.vue'
  import {checkLogin} from '@/util/common.js'
  
  export default {
    name: 'mentorIndex',
	components:{TemplateLoading},
	
    data() {
      return {
		loading:false,
		swiperHeight:202,
		list: [],
		space:[],
		listAdv:[],
		timeFormat:"",
		timeFormat:"",
      }
    },
	mounted() {
		this.initData()
	},
    methods: {
		search(){
				  uni.navigateTo({
				    url: '/pages/search/search?type=2'
				  })
		},
		detail(item){
			uni.navigateTo({
			  url: '/pages/activity/detail?id='+item.id
			}) 
		},
	  preOrder(id){
		if(checkLogin("/pages/index/index?index=1")){
			uni.navigateTo({
			  url: '/pages/order/confirm/activity?id='+id
			}) 
		}
	  },
	  trunList(space_id){
		  uni.navigateTo({
		    url: '/pages/activity/list?space_id='+space_id
		  })
	  },
	  trunListCate(id){
		  uni.navigateTo({
		    url: '/pages/activity/list?cate_id='+id
		  })
	  },
	  initData(){
		  this.loading = true
		  // indexObj().then(res=>{
		  // 	this.list = res
		  // })
		  this.getData()
		  
		  fetchList({page:1,size:10,position:"activity_top"}).then(res=>{
			  this.loading = false
			  this.listAdv = res.data
		  },err=>{
			  this.loading = false
		  })
		  this.getRelateSpaceObj()
		  
	  },
	  
	  getRelateSpaceObj(){
		  getRelateSpace().then(res=>{
			  this.space = res
		  })
	  },
	  selectData(lat,lng){
		indexObj({lat:lat,lng:lng}).then(res=>{
			this.list = res
		})  
	  },
	  getData(){
		  var _t = this
		  uni.getLocation({
		  	success: function(res) {
		  		_t.selectData(res.latitude,res.longitude)
		  	},
		  	fail(err) {
		  		console.log(err)
		  		_t.selectData()
		  	},
		  });
	  }
    }
  }
</script>

<style lang="scss" scoped>
	.basic{
		font-family: "PingFangSCRegular";
		.submit-btn {
		  width: 100%;
		  background-color: $tn-main-orange;
		  color: #FFFFFF;
		  line-height: 105rpx;
		  font-size: 30rpx;
		  margin-top: 31rpx;
		}
	}
	.main_title{
		color: #FFFFFF;
		text-align: left;
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.mentor_title{
		color: #333333;
		background: #fff;
		text-align: center;
		line-height: 43rpx;
		font-weight: normal;
		
		
	}
	.tn-radius10{border-radius: 10rpx;}
	.heightBig{height: 382rpx;}
	.heightSmall{height: 125rpx;background-size: contain;background-repeat: no-repeat;margin-bottom: 16rpx;}
	.right0{margin-right: 0;}
	.left0{margin-left: 0;}
	.top-tips{color: $tn-main-orange;font-size: 18rpx;margin-top: 18rpx;margin-bottom: 30rpx;letter-spacing: 1px;font-weight: bold;}
	.flex00{
	}
	.width-2{width: 47%;}
	
	.flex-2{
		justify-content: space-between;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		width: 100%;
	}
	
	
	.search-box{
		height: 54rpx;
		width:100%; 
		background-color: #e5f3f9;
		//border:1px solid #FFF;
		border-radius: 27rpx;
		line-height: 54rpx;
		color: $tn-main-orange;
		font-size: 24rpx;
		padding: 0 10px;
		margin-top: 31rpx;
		.icon{
			font-size: 16px;
			margin-right: 5px;
			font-weight: bold;
		}
	}

  
  /* 内容容器 start */
  .bg-flex-shadow{
    background-color: #e2f1f9;
    z-index: 9999;
  }
  /* 内容容器 end */
  
  .activity_list{
	  background: #FFFFFF;
	  border-radius: 10rpx;
	  //height: 173rpx;
	  overflow: hidden;
	  padding: 20rpx;
	  float: unset;
	  
	  .space_image{
		width: 48%;
		background-size: cover;
		height: 104rpx;
	  }
	  
	  .top{
		  overflow: hidden;
		 .logo{
		 		  background: url("https://www.zztengma.com/lihu/bumang/images/activityDefault.png") no-repeat  ;
		 		  background-size: cover;
		 		  width: 32%;
		 		  height: 150rpx;
		 		  float: left;
		 }
		 .right{
		 		  float: right;
		 		  // margin-top: 18rpx;
		 		  width: 66%;
		 		  .title{
		 			font-size: 24rpx;
		 			color: #333333;
		 			font-weight: bold;
		 		  }
		 		  .location{
					  color: #666666;
		 			  margin-top: 8rpx;
		 			  font-size: 20rpx;
		 			  .icons{width: 20px;height: 20px;display: inline;margin-right: 7rpx;}
		 			}
					
					.location_price{
						display: flex;justify-content: space-between;
						
						.price{font-size: 28rpx;color: #333333;}
						.order-btn{
							background:$tn-main-orange;color: #FFFFFF;padding: 0 1px;border-radius: 10rpx;font-size: 28rpx;
							height: 46rpx;
							line-height: 46rpx;
						}
					}
		 		  
		 }
		  
	  }
	  
	  
	  .footer{
		  color: #666666;
		  font-size: 12rpx;
		  font-weight: bold;
		  margin-top: 8rpx;
		  .footer-left{
			  width: 60%;
		  }
		  .footer-right{
			  width: 40%;
			  
			  display: flex;justify-content: space-between;
			  .price{color: $tn-main-orange;font-weight: bold;font-size: 24rpx;}
			  .order-btn{background:$tn-main-orange;color: #FFFFFF;padding: 3rpx 6rpx;border-radius: 10rpx;font-size: 28rpx;font-weight: bold;margin-top: -8rpx;}
		  }
	  }
  }
  
  .activity_list.bg{background: none;padding: 0;}
</style>
